<template>
	<view>
		<view class="time">{{time}}</view>
			<view class="content" v-for="(item,index) in questions" :key="index">
				<view class="topic">第{{index + 1}}题</view>
				<view class="question">
					<text>{{item.title}}</text>
					<text class="tips">（{{item.tips}}）</text>
				</view>
				<view class="answer">
					<!-- 单选题 -->
					<view v-if="item.showtype == 0">
						<u-radio-group
							placement="column"
							v-model="item.answer"
							@change="groupChange"
						>
							<u-radio
								:customStyle="{marginBottom: '12px'}"
								v-for="(radioItem, radioIndex) in item.radios"
								:key="radioIndex"
								:label="radioItem.name"
								:name="radioItem.name"
								:disabled="true"
								labelSize=32rpx
								size=32rpx
								@change="radioChange(index,radioItem.name)"
							>
							</u-radio>
						</u-radio-group>
					</view>

					<!-- 上传图片 -->
					<view v-if="item.showtype == 1">
						<u-upload
							:fileList="item.fileList"
							name="name"
							multiple
							:maxCount="1"
							:previewFullImage="true"
							width="100"
	            height="100"
						></u-upload>
					</view>

					<!-- 文本框 -->
					<view v-if="item.showtype == 2">
						<u--textarea v-model="item.answer" placeholder="请输入内容" :disabled="true" ></u--textarea>
					</view>
				</view>

				<!-- 没有更多了 -->
				<view class="nomore" v-if="index == questions.length-1">没有更多了</view>
				<u-line></u-line>
			</view>

			<!-- 定位 -->
			<view class="position">
				<view class="positionTitle">定位</view>
				<view style="font-size: 32rpx;">{{position}}</view>
			</view>
			<u-line></u-line>
			<button class="btn" :disabled="true">提交</button>
	</view>
</template>

<script>
	export default {
		onLoad: function (option) {
			let that = this;
			console.log(JSON.parse(option.item));
			const data = JSON.parse(option.item);
			this.time = data.time;
			const time = data.time;
			wx.request({
				url: 'http://localhost:8123/record/listOne', //仅为示例，并非真实的接口地址
				data: {
					student: option.id,
					datetime: time
				},
				header: {
					'content-type': 'application/json' // 默认值
				},
				success:(res => {
					console.log(res.data);
					console.log(JSON.parse(res.data.data.value));
					const answer = JSON.parse(res.data.data.value);
					that.questions[0].answer = answer[1].val;
					that.questions[1].fileList.push({url:"http://localhost:8123/image/"+answer[2].val})
					that.questions[2].fileList.push({url:"http://localhost:8123/image/"+answer[3].val})
					that.questions[3].answer = answer[4].val;
					that.questions[4].answer = answer[5].val;
					that.questions[5].answer = answer[6].val;
					that.position = answer[0].val;
				})
			})

		},
		data() {
			return {
				time: '',
				questions: [
					// showtype:0 单选题
					// showtype:1 上传图片
					// showtype:2 文本输入
					// fileList:图片保存
					// text:文本框保存
					// tips:问题后面的提示
				{
					title:'当天体温',
				  showtype:0, 
					radios:[
						{name:'低于37.3度', disabled: false},
						{name:'高于37.3度', disabled: false}
					],
					fileList: [],
					tips:'单选题',
					answer:''
				},
				{
					title:'当天天津健康码截图', 
					showtype:1,
					radios:[],
					fileList: [],
					tips:'上传图片',
					answer:''
				},
				{
					title:'当天大数据行程卡截图', 
					showtype:1,
					radios:[],
					fileList: [],
					tips:'上传图片',
					answer:''
				},
				{
					title:'当天是否外出（跨市）？如有请详细描述', 
					showtype:2,
					radios:[],
					fileList: [],
					tips:'文本输入',
					answer:''
				},
				{
					title:'是否是管控地区？', 
					showtype:0,
					radios:[
						{name:'是', disabled: false},
						{name:'否', disabled: false}
					],
					fileList: [],
					tips:'单选题',
					answer:''
				},
				{
					title:'14日内，是否具有高中风险地区旅居史？', 
					showtype:0,
					radios:[
						{name:'是', disabled: false},
						{name:'否', disabled: false}
					],
					fileList: [],
					tips:'单选题',
					answer:''
				}
				],
				// 定位
				position: '',
				// 图片
				imgUrl: ''
			}
		},
		methods: {
		}
	}
</script>

<style>
.time {
	margin-left: 2%;
	font-size: 36rpx;
	font-weight: 580;
}
.content {
	margin-right: 5%;
	margin-left: 5%;
}
.topic {
	margin-top: 5%;
	margin-bottom: 1%;
	font-size: 32rpx;
	font-weight: 550;
}
.tips {
	color: rgb(185, 197, 198);
}
.question {
	margin-bottom: 3%;
	font-size: 32rpx;
}
.answer {
	margin-bottom: 5%;
	font-size: 32rpx;
}
.nomore {
	color: rgb(185, 197, 198);
	text-align: center;
}
.position {
	margin: 5%;
}
.positionTitle {
	margin-bottom: 1%;
	font-size: 34rpx;
}
.btn {
	margin-top: 5%;
	margin-bottom: 5%;
	width: 80%;
	background-color: rgb(255, 255, 255);
	color: rgb(0, 162, 255);
}
</style>
